{% extends 'base/base_site.html' %}
{% block css %}
{{ block.super}}
<link href="/static/js/plugins/editormd/lib/katex/katex.min.css" rel="stylesheet">
<style media="screen">
.m-table{
    border-collapse:collapse;
    margin: 0 auto;
    width: 80%;
}
.m-table td,th{
    border:0px solid #cccccc;
    padding: 5px;
    font-size: 14px;

}
.ibox-tools-new{
    float: right;
    margin-top: -30px;
}
.alert{
    padding:11px;
    background-color: #f5f5f5;
}
.ibox-content{
    padding-bottom:5%;
    min-width: 800px;
}
.ibox-title{
    min-width: 800px;
}

</style>
{% endblock%}

{% block content %}
<div class="ibox-title">
    <h3 style="margin-top:0px">故障报告: {{ content.title }}</h3>
    {% if request.user == content.author  or request.user.is_superuser %}
        <div class="ibox-tools-new">
            <a href=/fms/edit?id={{content.id}} class="btn btn-xs btn-success btn-edit">编辑</a>
            <a href=/fms/list class="btn btn-xs btn-success btn-edit">返回</a>
        </div>
        <!--<div class="ibox-tools-new">-->
            <!--<a href=/fms/list class="btn btn-xs btn-success btn-edit">返回</a>-->
        <!--</div>-->
    {% endif %}
</div>

<div class="ibox-content">
    {% if content %}
    <div class="alert alert-info">
         <span class="alert-link">故障概述</span>
    </div>

    <table class="m-table">
        <tbody>
            <tr>
                <td><b>故障时间:</b></td>
                <td>{{content.start_time|date:"Y-m-d H:i"}}~{{content.end_time|date:"Y-m-d H:i"}}</td>

                <td><b>影响项目:</b></td>
                <td>{{content.project}}</td>

                <td><b>故障状态:</b></td>
                <td>{{content.get_status_display}}</td>
            </tr>
            <tr>
                <td><b>故障等级:</b></td>
                <td>{{content.get_level_display}}</td>
                <td><b>创建者:</b></td>
                <td>{{ content.author.fullname }}</td>
                <td><b>主导改进方:</b></td>
                <td>{{content.get_improve_display}}</td>
            </tr>
            <tr>
                <td><b>故障类型:</b></td>
                <td>
                {% if content.type   %}
                    {{ content.type }}
                {% else %}
                    无  
                {% endif %}
                </td>
                <td><b>影响时间:</b></td>
                <td>{{ content.time }}</td>

            </tr>
        </tbody>
    </table>

    <div class="alert alert-info" style="margin-top:20px">
         <span class="alert-link">故障解决过程</span>

    </div>

    <table class="m-table">
        <tbody>
                <tr>
                <td>
                    <div id="editormd-effect">
                        <div class="col-sm-8">{{ content.effect }}</div>
                    </div>

                </td>
                </tr>
        </tbody>
    </table>


    <!--<div class="alert alert-info" style="margin-top:20px">-->
         <!--<span class="alert-link">故障分析</span>-->
    <!--</div>-->

    <!--<table class="m-table">-->
        <!--<tbody>-->
                <!--<tr>-->
                <!--<td>-->
                    <!--<div id="editormd-content">-->
                        <!--<textarea  style="display:none;">{{content.content}}</textarea>-->
                    <!--</div>-->
                <!--</td>-->
                <!--</tr>-->
        <!--</tbody>-->
    <!--</table>-->

    <!--<div class="alert alert-info" style="margin-top:20px">-->
         <!--<span class="alert-link">故障原因</span>-->
    <!--</div>-->

    <!--<table class="m-table">-->
        <!--<tbody>-->
                <!--<tr>-->
                <!--<td>-->
                    <!--<div id="editormd-reasons">-->
                        <!--<textarea style="display:none;">{{content.reasons}}</textarea>-->
                    <!--</div>-->
                <!--</td>-->
                <!--</tr>-->
        <!--</tbody>-->
    <!--</table>-->

    <!--<div class="alert alert-info" style="margin-top:20px,margin-bottom:20px">-->
         <!--<span class="alert-link">解决方案</span>-->
    <!--</div>-->

    <!--<table class="m-table">-->
        <!--<tbody>-->
                <!--<tr>-->

                <!--<td>-->
                    <!--<div id="editormd-solution">-->
                        <!--<textarea style="display:none;">{{content.solution}}</textarea>-->
                    <!--</div>-->
                <!--</td>                -->

                <!--</tr>-->
        <!--</tbody>-->
    <!--</table>-->

    {% else %}
    <p style="text-align:center;color:#FF0000;font-weight:bold;">{{ error }}</p>
    {% endif %} 
</div>
{% endblock %}

{% block javascripts %}
{{ block.super}}
<script src="/static/js/plugins/editormd/lib/marked.min.js"></script>
<script src="/static/js/plugins/editormd/lib/prettify.min.js"></script>
<script src="/static/js/plugins/editormd/lib/raphael.min.js"></script>
<script src="/static/js/plugins/editormd/lib/underscore.min.js"></script>
<script src="/static/js/plugins/editormd/lib/sequence-diagram.min.js"></script>
<script src="/static/js/plugins/editormd/lib/flowchart.min.js"></script>
<script src="/static/js/plugins/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/static/js/plugins/editormd/lib/katex/katex.min.js"></script>
<script src="/static/js/plugins/editormd/editormd.min.js"></script>

<!--<script type="text/javascript">-->
    <!--var  elements = ['#effect','#reasons','#solution'];-->
    <!--$.each(elements,function(k,v){-->
        <!--var temp = $(v).text().replace(/\n/g, '<br/>');-->
        <!--$(v).html(temp);-->
    <!--});-->

<!--</script>-->

<!--<script type="text/javascript">-->

  <!--$(function() {-->
      <!--var id = ["editormd-effect","editormd-reasons","editormd-content","editormd-solution"];-->
      <!--$.each(id,function(k,v){-->
          <!--var EditormdView = editormd.markdownToHTML(v, {-->
          <!--htmlDecode      : "style,script,iframe",  -->
          <!--emoji           : true,-->
          <!--taskList        : true,-->
          <!--tex             : true,  // 默认不解析-->
          <!--flowChart       : true,  // 默认不解析-->
          <!--sequenceDiagram : true,  // 默认不解析-->
          <!--path    : "/static/js/plugins/editormd/lib/",-->
          <!--autoLoadKaTeX: !1,-->
            <!--});-->
         <!--}); -->
      <!--});-->

<!--</script>-->
{% endblock %}